<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background-color: #FFFFFF;min-height: 100vh;font-size: 0.373rem;
			}
			ul, ol { list-style:none; } 
			body input[type='text'],ul,li{padding: 0;margin: 0;}
			.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
			/*顶部*/
			.bj_content{padding:0 0.13rem;background: #fff;}
			.bj_content .p .like span{margin: 0;}
			.bj_content .like i{color:#1d83fc;font-size: 0.55rem;margin-right: 0.1rem;}
			.bj_content img{max-width: 100%;}
			.bj_content .p{display: flex;justify-content: space-between;height: 1.6rem;
    line-height: 1.6rem;font-size: 0.4rem;}
			.bj_content .p span{margin: 0 0.2rem;display: flex;align-items: center;}
 			.bd_xjxq_img{height:10rem ;}
 			.bd_xjxq_img video{height:100% ;width: 100%;}
 			.bd_xjxq{background: #FFFFFF;}
 			.bd_xjxq_cont{padding: 0.4rem;}
 			.bd_xjxq_cont_h3{font-size: 0.426rem;text-align: center;}
 			.bd_xjxq_cont_data{font-size: 0.373rem;text-align: center;width: 100%;display: block;}
 			.bd_xjxq_input_title{display: block;line-height: 1rem;font-size: 0.426rem;padding: 0 0.4rem;}    
 			.bd_xjxq_input_xuan span{color: #8f8f94;padding: 0.1rem 0.2rem;border-radius: 0.1rem;margin: 0 0.4rem 0 0;display: inline-block;border: 1px solid #8f8f94;}
 			.bd_xjxq_input_xuan .active{color: #1383ff;border: 1px solid #1383ff;}
 			.bd_xjxq_but{margin: 0.5rem auto;display: block;background: #1383ff;color: #fff;border: 0;}
 			.bd_xjxq_input_xuan{padding: 0 0.4rem;}
 			.bj_content .title{background: #fff;text-align: center;line-height: 2;font-size: 0.4rem;font-weight: bold;}
		</style>
	</head>


	<body>
		<div id="app">
		<!--顶部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">{{html.name}}</h1>
		</header>
		<div class="bj_content mui-content">
			
			<div class="p">
				<span v-html="html.createtime"></span><span>浏览量：{{html.scan}}人</span><span class="like"><i :class="html.no"  @click="like()"></i><span>{{html.collectnum}}人收藏</span></span>
			</div>
 			<div class="bd_xjxq">
 				<div class="bd_xjxq_top">
 					<div class="bd_xjxq_img">
 						<video :src="url" webkit-playsinline controls="controls" preload>
 						</object>
 					</video>
					</div>
 				</div>
 				<!--<div class="bd_xjxq_cont">
 					<h3 class="bd_xjxq_cont_h3">数字电视、有线电视开户</h3>
 					<span class="bd_xjxq_cont_data">2018/05/20</span>
 					<p>为便捷用户充值缴费及订购业务，提升客户满意度，向广大用户提供优质、高效、满意服务，广西广电网络网上商城于2013年4月15日正式上线试运营，网上商城为用户提供包括高清机顶盒新装、置换、副机安装等在线订购服务，足不出户，即可在家轻松办理业务套餐。有定期活动、多项特权，零</p>
 				</div>-->
 				<div class="bd_xjxq_input">
 					<span class="bd_xjxq_input_title">请投最好的一位</span>
 					<div class="bd_xjxq_input_xuan">
 						<span :class="item.checked == true ? 'active':''" @click="changeActive(i)" v-for="(item,i) in menuItem">{{item.name}}</span>
 						
 					</div>
 					<button class="bd_xjxq_but" @click="subbtn">提交</button>
 				</div>
 			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/js.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</div>	
	</body>

</html>
<script type="text/javascript">
	mui.init();
	if (Storage.get('user') == null || Storage.get('user') == undefined) {
		var user = 0;
	}else{
		var user = Storage.get('user').uid;
	}
	var vue = new Vue({
        el: '#app',
        data: {
        	menuItem:[
        	{checked:true,name:'选择一'},
        	{checked:false,name:'选择二'},
        	{checked:false,name:'选择三'}
        	],
        	url:'',
        	html:'',
        },
        methods:{
        	//投票
        	changeActive:function(i){
        		var list = vue.menuItem
        		mui.each(vue.menuItem,function(o,v){
                    v.checked=false
                })
        		list[i].checked = true
        		console.log(i)
        	},
        	//提交
        	subbtn:function(){
        		mui.toast('提交成功',{ duration:'long', type:'div' })
        	}
        }
    })
	var href = location.href;
    var id = href.split("=")[1].split("&");
    var type = href.split("=")[2];
	mui.post(url+"api/system/detailModel",{
  		id:id[0],type:type,types:1,uid:user
  	},function(data){
  		var data = JSON.parse(data);
  		console.log(data)
  		vue.url = data.sss.href
  		vue.html = data.sss
  		vue.html.scan = vue.html.scan +1
	},'json');
	
</script>